<script setup>
  import { onMounted, ref } from 'vue'
  import { onLoad, onShow } from '@dcloudio/uni-app'
  import { http } from '@/utils/http.js'
  import infomask from './component/infomask.vue'

  import { parseTime } from '@/utils/index.js'

  const blindboxId = ref()
  const boxId = ref()
  //弹幕
  const barrageTopInfo = ref([])
  const barrageBottomInfo = ref([])
  // 三个轮播
  const threeAction = ref([])
  // 概率展示
  const showProbality = ref([])
  //商品
  const goodsList = ref([])
  const boxDetailInfo = ref()
  // 优惠券
  const couponId = ref(0)
  const couponname = ref('')
  const couponType = ref(-1)

  // 盲盒详情
  const isReservation = ref(0)
  async function getblindboxDetail() {
    const res = await http.request({
      url: '/api/box/boxDetails',
      method: 'POST',
      data: {
        id: blindboxId.value,
        case_id: 0,
      },
    })
    boxId.value = res.data.box.id
    // 弹幕
    res.data.log.forEach((item, index) => {
      if (index <= Math.floor(res.data.log.length / 2)) {
        barrageTopInfo.value.push(item)
      } else {
        barrageBottomInfo.value.push(item)
      }
    })
    //三个轮播
    for (let i = 0; i < 6; i++) {
      threeAction.value.push(res.data.goods_info[i])
    }
    // 概率展示
    showProbality.value = res.data.box.probability_show
    //商品
    goodsList.value = res.data.goods_info
    boxDetailInfo.value = res.data.box
    isReservation.value = res.data.is_subscription
  }

  // 三个轮播
  setInterval(() => {
    let firstElement = threeAction.value.shift()

    // 将该元素添加到数组的末尾
    threeAction.value.push(firstElement)
  }, 6000)

  //去我的奖品
  function toMyReward() {
    uni.reLaunch({
      url: '/pages/bag/index',
    })
  }

  // 规则
  const rulepopup = ref()
  function rulePOP() {
    getRules(4)
    rulepopup.value.open('bottom')
  }

  // 出奖记录
  const currentId = ref(1)
  const historyPage = ref(1)
  const historyList = ref([])
  const historypopup = ref()
  function wxHistory() {
    currentId.value = 1
    historyPage.value = 1
    historyList.value = []
    getHistoryList()
    historypopup.value.open('bottom')
  }

  function closeHistory() {
    currentId.value = 1
    historyPage.value = 1
    historyList.value = []
    historypopup.value.close('bottom')
  }

  async function getHistoryList() {
    const res = await http.request({
      url: '/api/box/winLog',
      method: 'POST',
      data: {
        page: historyPage.value,
        limit: 10,
        rule_id: currentId.value,
        id: boxId.value,
      },
    })
    historyList.value = [...historyList.value, ...res.data]
  }

  //切换历史记录
  function getItemHistoryList(id) {
    currentId.value = id
    historyPage.value = 1
    historyList.value = []
    getHistoryList()
  }

  //触底刷新
  function historyListLower() {
    ++historyPage.value
    getHistoryList()
  }

  function changeAgree() {
    agree.value = !agree.value
  }
  // 查看奖品详情
  const showmask = ref(false)
  const maskindex = ref(0)
  function goodsinfo(index) {
    showmask.value = true
    maskindex.value = index
  }
  // 关闭mask
  function closeMask() {
    showmask.value = false
  }

  //预约
  async function reservationWX() {
    if (isReservation.value == 1) {
      return
    }
    const res = await http.request({
      url: '/api/box/ysPost',
      method: 'POST',
      data: {
        id: boxId.value,
      },
    })
    if (res.st == 1) {
      isReservation.value = 1
      uni.utils.toast('订阅成功')
    } else {
      uni.utils.toast('订阅失败')
    }
  }

  // 规则
  const ruleStrings = ref('')
  async function getRules(id) {
    const res = await http.request({
      url: '/api/index/getDetails',
      method: 'POST',
      data: {
        id: id,
      },
    })
    ruleStrings.value = res.data.details
  }

  onLoad((option) => {
    blindboxId.value = option.id
  })
  onShow(() => {
    getblindboxDetail()
    uni.$once('thecoupon', (data) => {
      console.log(data)
      realmoney.value = paymoney.value
      if (data.coupon) {
        couponId.value = data.coupon.id
        couponname.value = data.coupon.title
        // 满减
        if (data.coupon.type == 1) {
          realmoney.value = paymoney.value - data.coupon.money
        } else if (data.coupon.type == 2) {
          realmoney.value = paymoney.value - data.coupon.money
        } else if (data.coupon.type == 3) {
          realmoney.value = paymoney.value * data.coupon.discount
        }
      }
    })
  })
</script>

<template>
  <view class="wx-content">
    <scroll-view scroll-y="true" class="scroll-Y" style="height: 100vh">
      <view class="" style="padding-bottom: 214rpx; padding-top: 32rpx">
        <view class="wx-barrage" v-if="barrageTopInfo.length != 0">
          <view class="barrage-content">
            <view class="barrage-top">
              <view
                class="barrage-item"
                v-for="(item, index) in barrageTopInfo"
                :key="'topbarrage' + index"
              >
                <image
                  style="
                    width: 41rpx;
                    height: 41rpx;
                    border-radius: 50%;
                    margin-right: 8rpx;
                  "
                  :src="item.himg"
                  mode=""
                ></image>
                <text>{{ `${item.nickname}抽中了${item.goods_name}` }}</text>
              </view>
            </view>
            <view class="barrage-bottom">
              <view
                class="barrage-item"
                v-for="(item, index) in barrageTopInfo"
                :key="'bottombarrage' + index"
              >
                <image
                  style="
                    width: 41rpx;
                    height: 41rpx;
                    border-radius: 50%;
                    margin-right: 5rpx;
                  "
                  :src="item.himg"
                  mode=""
                ></image>
                <text>{{ `${item.nickname}抽中了${item.goods_name}` }}</text>
              </view>
            </view>
          </view>
        </view>
        <view class="wx-top-content">
          <view class="rules" @click="rulePOP"> 规则 </view>
          <view class="wx-history" @click="wxHistory">出奖记录</view>
          <view class="my-reward" @click="toMyReward"> </view>
          <view class="content-top"> {{ boxDetailInfo.name }} </view>
          <view class="content-list">
            <view class="left">
              <image
                :src="threeAction[0].img"
                style="width: 100rpx"
                mode="widthFix"
              ></image>
              <view class="left-name">
                <uni-notice-bar
                  :speed="10"
                  color="#fff"
                  background-color="transparent"
                  scrollable
                  :text="threeAction[0].goods_name"
                />
              </view>
            </view>
            <view class="center">
              <image
                :src="threeAction[1].img"
                style="width: 150rpx"
                mode="widthFix"
              ></image>
              <view class="center-name">
                <uni-notice-bar
                  :speed="10"
                  color="#fff"
                  background-color="transparent"
                  scrollable
                  :text="threeAction[1].goods_name"
                />
              </view>
            </view>
            <view class="right">
              <image
                :src="threeAction[2].img"
                style="width: 100rpx"
                mode="widthFix"
              ></image>
              <view class="right-name">
                <uni-notice-bar
                  :speed="10"
                  color="#fff"
                  background-color="transparent"
                  scrollable
                  :text="threeAction[2].goods_name"
                />
              </view>
            </view>
          </view>
        </view>
        <view class="wx-center-content">
          <!-- <view class="top-text"> </view> -->
          <view class="bottom-text">
            <text>100%中奖</text>
            <text>{{
              `价值${Number(boxDetailInfo.min_price).toFixed()}~${Number(
                boxDetailInfo.max_price
              ).toFixed()}元`
            }}</text>
          </view>
        </view>
        <!-- <view class="probability"> - 各款式获得概率 - </view> -->
        <view class="scroll-probability">
          <view class="scroll-H-view">
            <scroll-view class="scroll-view_H" scroll-x="true">
              <view
                class="scroll-view-item_H"
                v-for="(item, index) in showProbality"
                :key="'probality' + index"
              >
                <text class="probability-top">
                  {{ Object.keys(item)[0] }}
                </text>
                <text class="probability-bottom">
                  {{ item[Object.keys(item)] + '%' }}
                </text>
              </view>
            </scroll-view>
          </view>
        </view>
        <view class="scroll-content">
          <!-- <scroll-view scroll-y="true" class="scroll-Y"> -->
          <view class="scroll-Y-view">
            <view
              v-for="(item, index) in goodsList"
              :key="'goodslist' + item.id"
              @click="goodsinfo(index)"
              class="scroll-view-item"
              :class="{
                'orange-bg': item.rule_id == '1',
                'pink-bg': item.rule_id == '2',
                'blue-bg': item.rule_id == '3',
                'white-bg': item.rule_id == '4',
              }"
            >
              <image
                style="height;: 120rpx"
                :src="item.img"
                mode="heightFix"
              ></image>
              <view class="goodslist-name">
                {{ item.goods_name }}
              </view>
            </view>
          </view>
          <!-- </scroll-view> -->
        </view>
      </view>
    </scroll-view>
    <!-- 底部 -->
    <view class="wx-bottom">
      <view
        class="reservation"
        :class="{
          'reservation-bg': isReservation == 0,
          'reservation-bg-ok': isReservation == 1,
        }"
        @click="reservationWX"
      >
      </view>
      <view class="abandon">
        开售时间：{{ parseTime(boxDetailInfo.ys_time) }}
      </view>
    </view>

    <infomask
      v-if="showmask"
      @close-mask="closeMask"
      :maskindex="maskindex"
      :thegoods="goodsList"
      :boxId="boxId"
    ></infomask>

    <!-- 规则弹出层 -->
    <uni-popup ref="rulepopup" type="bottom">
      <view class="rulepopup-content">
        <view
          class=""
          style="
            color: #fff;
            width: 100%;
            text-align: center;
            line-height: 128rpx;
          "
        >
          规则
        </view>
        <scroll-view scroll-y="true" style="height: 70vh">
          <view
            style="
              width: 94%;
              margin: 0 auto;
              color: #aca1ea;
              padding-bottom: env(safe-area-inset-bottom);
            "
            class=""
          >
            <rich-text :nodes="ruleStrings"></rich-text>
          </view>
        </scroll-view>
      </view>
    </uni-popup>

    <!-- 出奖记录弹出层 -->
    <uni-popup ref="historypopup" type="bottom">
      <view class="historypopup-content">
        <view class="close-historypopup" @click="closeHistory"> </view>
        <view class="historypopup-content-title"> 出奖记录 </view>
        <view class="scroll-category">
          <view class="scroll-H-view">
            <scroll-view class="scroll-view_H" scroll-x="true">
              <view
                class="scroll-view-item_H"
                v-for="(item, index) in boxDetailInfo.ruleArr"
                :key="'history' + index"
                @click="getItemHistoryList(item.rule_id)"
              >
                <!-- <text class="probability-top">
									{{ Object.keys(item)[0] }}
								</text>
								<text class="probability-bottom">
									{{ item[Object.keys(item)] + '%' }}
								</text> -->
                <view
                  class="history-aim"
                  :style="[
                    {
                      display: item.rule_id == currentId ? 'block' : 'none',
                    },
                  ]"
                >
                </view>
              </view>
            </scroll-view>
          </view>
        </view>

        <view class="history-list">
          <scroll-view
            scroll-y="true"
            class="scroll-Y"
            style="height: 61vh"
            @scrolltolower="historyListLower"
          >
            <view
              class="history-item"
              v-for="(item, index) in historyList"
              :key="'historylist' + item"
            >
              <image
                :src="item.himg"
                style="
                  width: 94rpx;
                  height: 94rpx;
                  border-radius: 50%;
                  flex-shrink: 0;
                "
                mode=""
              ></image>
              <text>{{ item.nickname[0] }}****</text>
              <text class="history-name" style="width: 52%; font-size: 23rpx">{{
                item.goods_name
              }}</text>
              <image
                :src="item.goods_img"
                style="
                  width: 94rpx;
                  height: 94rpx;
                  border-radius: 10rpx;
                  flex-shrink: 0;
                "
                mode=""
              ></image>
            </view>
          </scroll-view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<style lang="scss" scoped>
  // 卡片背景
  .orange-bg {
    background: url('https://ojqn.wm2177.com/wechat_imgs/orange-bg.png')
      no-repeat;
    background-size: contain;
  }
  .pink-bg {
    background: url('https://ojqn.wm2177.com/wechat_imgs/pink-bg.png') no-repeat;
    background-size: contain;
  }
  .blue-bg {
    background: url('https://ojqn.wm2177.com/wechat_imgs/blue-bg.png') no-repeat;
    background-size: contain;
  }
  .white-bg {
    background: url('https://ojqn.wm2177.com/wechat_imgs/white-bg.png')
      no-repeat;
    background-size: contain;
  }
  @keyframes scroll {
    0% {
      transform: translateX(0); /* 初始位置 */
    }
    100% {
      transform: translateX(-100%); /* 终点位置 */
    }
  }
  .wx-content {
    height: 100vh;
    background-color: #1a133f;
    color: white;
    overflow: hidden;
    .wx-barrage {
      height: 124rpx;
      overflow: hidden;
      .barrage-content {
        height: 139rpx;
        animation: scroll 30s linear infinite; /* 滚动动画 */
        .barrage-top {
          display: flex;
          align-items: center;
          margin-bottom: 20rpx;
          .barrage-item {
            margin-right: 51rpx;
            &:nth-child(2n) {
              background-color: rgba(247, 251, 139, 0.5);
            }
            &:nth-child(3n) {
              background-color: rgba(243, 184, 115, 0.5);
            }
            &:nth-child(4n) {
              background-color: rgba(66, 46, 109, 0.5);
            }
          }
        }
        .barrage-bottom {
          display: flex;
          align-items: center;
          .barrage-item {
            margin-left: 51rpx;
            background-color: rgba(247, 251, 139, 0.5);
            &:nth-child(2n) {
              background-color: rgba(243, 184, 115, 0.5);
            }
            &:nth-child(3n) {
              background-color: rgba(66, 46, 109, 0.5);
            }
            &:nth-child(4n) {
              background-color: rgba(251, 150, 224, 0.5);
            }
          }
        }
        .barrage-item {
          display: inline-flex;
          align-items: center;
          flex-shrink: 0;
          height: 48rpx;
          padding: 8rpx;
          box-sizing: border-box;
          border-radius: 24rpx;
          background-color: rgba(251, 150, 224, 0.5);
          text {
            font-size: 20rpx;
          }
        }
      }
    }
    .wx-top-content {
      position: relative;
      z-index: 1;
      height: 402rpx;
      background: url('https://ojqn.wm2177.com/wechat_imgs/wx/top-content.png')
        no-repeat;
      background-size: 100%;
      .rules {
        position: absolute;
        top: 12rpx;
        left: 56rpx;
        width: 63rpx;
        height: 31rpx;
        background-color: #282968;
        border-radius: 6rpx;
        font-size: 22rpx;
        line-height: 31rpx;
        text-align: center;
      }
      .wx-history {
        position: absolute;
        top: 54rpx;
        left: 36rpx;
        width: 106rpx;
        height: 43rpx;
        background: url('https://ojqn.wm2177.com/wechat_imgs/wx/wx-history.png')
          no-repeat;
        background-size: contain;
        border-radius: 6rpx;
        font-size: 22rpx;
        line-height: 43rpx;
        font-weight: 700;
        color: #181340;
        text-align: center;
      }
      .my-reward {
        position: absolute;
        top: -32rpx;
        right: 18rpx;
        width: 133rpx;
        height: 133rpx;
        background: url('https://ojqn.wm2177.com/wechat_imgs/txzr/my-gift.png')
          no-repeat;
        background-size: contain;
      }
      .content-top {
        font-size: 40rpx;
        line-height: 90rpx;
        font-weight: 800;
        text-align: center;
        font-style: italic;
        text-shadow: 2px 2px 2px $all-color;
      }
      .content-list {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 71%;
        padding: 0 20rpx;
        ::v-deep .uni-noticebar {
          height: 25rpx;
          // margin-top: 18rpx;

          .uni-noticebar__content-text {
            font-size: 14rpx;
          }
        }
        .left {
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
          width: 207rpx;
          height: 179rpx;
          background: url('https://ojqn.wm2177.com/wechat_imgs/wx/top-goods-left.png')
            no-repeat;
          background-size: 100%;
          .left-name {
            position: absolute;
            left: 39rpx;
            bottom: 16rpx;
            width: 134rpx;
            height: 25rpx;
            background: url('https://ojqn.wm2177.com/wechat_imgs/wx/top-name-left.png')
              no-repeat;
            background-size: 100%;
            font-size: 18rpx;
            text-align: center;
            line-height: 25rpx;
          }
        }
        .center {
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
          width: 276rpx;
          height: 238rpx;
          background: url('https://ojqn.wm2177.com/wechat_imgs/wx/top-goods-mid.png')
            no-repeat;
          background-size: 100%;
          .center-name {
            position: absolute;
            left: 51rpx;
            bottom: 21rpx;
            width: 178rpx;
            height: 32rpx;
            background: url('https://ojqn.wm2177.com/wechat_imgs/wx/top-name-mid.png')
              no-repeat;
            background-size: 100%;
            font-size: 18rpx;
            text-align: center;
            line-height: 25rpx;

            ::v-deep .uni-noticebar {
              height: 32rpx;
              // margin-top: 18rpx;

              .uni-noticebar__content-text {
                font-size: 20rpx;
              }
            }
          }
        }
        .right {
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
          width: 207rpx;
          height: 179rpx;
          background: url('https://ojqn.wm2177.com/wechat_imgs/wx/top-goods-left.png')
            no-repeat;
          background-size: 100%;

          .right-name {
            position: absolute;
            left: 39rpx;
            bottom: 16rpx;
            width: 134rpx;
            height: 25rpx;
            background: url('https://ojqn.wm2177.com/wechat_imgs/wx/top-name-left.png')
              no-repeat;
            background-size: 100%;
            font-size: 18rpx;
            text-align: center;
            line-height: 25rpx;
          }
        }
      }
    }
    .wx-center-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      position: relative;
      // top: -30rpx;
      z-index: 0;
      height: 76rpx;
      margin: 8rpx 0;
      box-sizing: border-box;
      background: url('https://ojqn.wm2177.com/wechat_imgs/wx/mid-content.png')
        no-repeat;
      background-size: 100%;
      .top-text {
        position: absolute;
        top: 106rpx;
        width: 436rpx;
        height: 40rpx;
        background: url('https://ojqn.wm2177.com/wechat_imgs/wx/center-content-title.png')
          no-repeat;
        background-size: 100%;
      }
      .bottom-text {
        position: absolute;
        top: 22rpx;
        display: flex;
        align-items: center;
        font-weight: bold;
        font-size: 26rpx;
        color: #fff3a5;
        text {
          &:first-child {
            display: inline-block;
            width: 116rpx;
            height: 32rpx;
            margin-right: 10rpx;
            background: url('https://ojqn.wm2177.com/wechat_imgs/wx/hundrend.png')
              no-repeat;
            background-size: 100%;
            line-height: 28rpx;
            text-align: center;
            font-size: 20rpx;
            font-weight: normal;
            color: #fff;
          }
        }
      }
    }
    .probability {
      width: 100%;
      position: relative;
      top: -35rpx;
      text-align: center;
      font-size: 22rpx;
    }
    // 概率滑动
    .scroll-probability {
      .scroll-H-view {
        height: 76rpx;
        margin: 0 21rpx;
        box-sizing: border-box;
        background: url('https://ojqn.wm2177.com/wechat_imgs/wx/scroll-back.png')
          no-repeat;
        background-size: contain;
        overflow: hidden;
        .scroll-view_H {
          white-space: nowrap;
          width: 96%;
          margin: 0 12rpx;
          .scroll-view-item_H {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 228rpx;
            height: 68rpx;
            background: url('https://ojqn.wm2177.com/wechat_imgs/wx/scroll-pink.png')
              no-repeat;
            background-size: contain;
            text-align: center;
            // line-height: 86rpx;
            &:nth-child(2n) {
              background: url('https://ojqn.wm2177.com/wechat_imgs/wx/scroll-orange.png')
                no-repeat;
              background-size: 100%;
            }
            &:nth-child(3n) {
              background: url('https://ojqn.wm2177.com/wechat_imgs/wx/scroll-blue.png')
                no-repeat;
              background-size: 100%;
            }
            &:nth-child(4n) {
              background: url('https://ojqn.wm2177.com/wechat_imgs/wx/scroll-pt.png')
                no-repeat;
              background-size: 100%;
            }

            .probability-top {
              margin-right: 10rpx;
              font-size: 26rpx;
              font-weight: 500;
            }
            .probability-bottom {
              font-size: 22rpx;
              font-weight: 500;
            }
          }
        }
      }
    }
    // 内容滑动
    .scroll-content {
      // .scroll-Y {
      width: 100%;
      // height: 38vh;
      .scroll-Y-view {
        width: 100%;
        padding: 0rpx 30rpx 0rpx 30rpx;
        box-sizing: border-box;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-evenly;
        .scroll-view-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-between;
          width: 224rpx;
          height: 265rpx;
          padding-top: 42rpx;
          padding-bottom: 22rpx;
          box-sizing: border-box;
          margin-bottom: 20rpx;
          // margin-right: 10rpx;
          &:nth-child(3n) {
            margin-right: 0;
          }
          .goodslist-name {
            height: 62rpx;
            padding: 0 20rpx;
            box-sizing: border-box;
            font-size: 20rpx;

            display: -webkit-box;
            -webkit-line-clamp: 1; /* 限制为两行 */
            -webkit-box-orient: vertical;
            overflow: hidden; /* 隐藏超出部分 */
            text-overflow: ellipsis; /* 超出部分用省略号表示 */
            white-space: normal; /* 允许换行 */
            /* 你可能还想设置一些其他样式，比如宽度、字体大小等 */
          }
        }
      }
      // }
    }
    .wx-bottom {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: fixed;
      bottom: 0;
      z-index: 99;
      height: 230rpx;
      width: 100%;
      background: url('https://ojqn.wm2177.com/wechat_imgs/txzr/bottom.png')
        no-repeat;
      background-size: 100%;

      .reservation {
        width: 700rpx;
        height: 120rpx;
      }

      .reservation-bg {
        background: url('https://ojqn.wm2177.com/wechat_imgs/is-presale.png')
          no-repeat;
        background-size: 100%;
      }
      .reservation-bg-ok {
        background: url('https://ojqn.wm2177.com/wechat_imgs/have-presale.png')
          no-repeat;
        background-size: 100%;
      }
      .abandon {
        width: 100%;
        margin-top: 4rpx;
        text-align: center;
        font-size: 22rpx;
        color: #cbcbf8;
      }
    }

    .rulepopup-content {
      height: 1117rpx;
      background-color: #1a133f;
      color: black;
    }

    .historypopup-content {
      position: relative;
      height: 76vh;
      padding: 25rpx 34rpx;
      box-sizing: border-box;
      background-color: #1a133f;
      .close-historypopup {
        position: absolute;
        top: 32rpx;
        right: 28rpx;
        width: 63rpx;
        height: 57rpx;
        background: url('https://ojqn.wm2177.com/wechat_imgs/txzr/close.png')
          no-repeat;
        background-size: 100%;
      }

      .historypopup-content-title {
        margin-bottom: 50rpx;
        font-size: 44rpx;
        font-weight: 800;
        text-align: center;
        font-style: italic;
        text-shadow: 2px 2px 2px #7863ff;
      }
      .scroll-category {
        .scroll-H-view {
          height: 76rpx;
          // margin: 0 21rpx;
          box-sizing: border-box;
          // background: url('https://ojqn.wm2177.com/wechat_imgs/wx/scroll-back.png')
          // 	no-repeat;
          // background-size: contain;
          overflow: hidden;
          .scroll-view_H {
            white-space: nowrap;
            height: 66rpx;
            width: 100%;
            .scroll-view-item_H {
              position: relative;
              display: inline-flex;
              align-items: center;
              justify-content: center;
              width: 172rpx;
              height: 48rpx;
              background: url('https://ojqn.wm2177.com/wechat_imgs/wx/history/history-orange.png')
                no-repeat;
              background-size: contain;
              text-align: center;
              // line-height: 86rpx;

              .history-aim {
                position: absolute;
                bottom: -20rpx;
                left: 50%;
                transform: translateX(-50%);
                width: 20rpx;
                height: 20rpx;
                background: url('https://ojqn.wm2177.com/wechat_imgs/wx/history/aim-orange.png')
                  no-repeat;
                background-size: 100%;
              }
              &:nth-child(2n) {
                background: url('https://ojqn.wm2177.com/wechat_imgs/wx/history/history-pink.png')
                  no-repeat;
                background-size: 100%;
                .history-aim {
                  background: url('https://ojqn.wm2177.com/wechat_imgs/wx/history/aim-pink.png')
                    no-repeat;
                  background-size: 100%;
                }
              }
              &:nth-child(3n) {
                background: url('https://ojqn.wm2177.com/wechat_imgs/wx/history/history-purple.png')
                  no-repeat;
                background-size: 100%;
                .history-aim {
                  background: url('https://ojqn.wm2177.com/wechat_imgs/wx/history/aim-purple.png')
                    no-repeat;
                  background-size: 100%;
                }
              }
              &:nth-child(4n) {
                background: url('https://ojqn.wm2177.com/wechat_imgs/wx/history/history-blue.png')
                  no-repeat;
                background-size: 100%;
                .history-aim {
                  background: url('https://ojqn.wm2177.com/wechat_imgs/wx/history/aim-blue.png')
                    no-repeat;
                  background-size: 100%;
                }
              }

              .probability-top {
                margin-right: 10rpx;
                font-size: 26rpx;
                font-weight: 500;
              }
              .probability-bottom {
                font-size: 22rpx;
                font-weight: 500;
              }
            }
          }
        }
      }
      .history-list {
        .history-item {
          display: flex;
          align-items: center;
          justify-content: space-between;
          height: 120rpx;
          margin-bottom: 10rpx;
          padding: 0 14rpx;
          box-sizing: border-box;
          background-color: #251d49;
          border-radius: 10rpx;
          font-size: 28rpx;
          .history-name {
            display: -webkit-box;
            -webkit-line-clamp: 1; /* 限制为两行 */
            -webkit-box-orient: vertical;
            overflow: hidden; /* 隐藏超出部分 */
            text-overflow: ellipsis; /* 超出部分用省略号表示 */
            white-space: normal; /* 允许换行 */
            /* 你可能还想设置一些其他样式，比如宽度、字体大小等 */
          }
        }
      }
    }
    .paypopup-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      height: 771rpx;
      padding: 63rpx 30rpx 0 30rpx;
      box-sizing: border-box;
      background-color: rgba(26, 19, 63, 0.9);
      color: #e1e1e1;
      .top-boxinfo {
        width: 100%;
        display: flex;
        align-items: center;
        flex-shrink: 0;
        .boxinfo-left {
          width: 184rpx;
          height: 184rpx;
          border-radius: 6rpx;
          overflow: hidden;
          margin-right: 12rpx;
        }
        .boxinfo-right {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          height: 180rpx;
        }
      }
      .choose-coupon {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 47rpx;
        flex-shrink: 0;
      }
      .pays {
        width: 100%;
        .pays-title {
          margin: 24rpx 0 13rpx 0;
          font-size: 24rpx;
        }
        .radio-item {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 13rpx 0;

          border-bottom: 1rpx solid rgba(255, 255, 255, 0.1);
          &:last-child {
            border: none;
          }
          .radio-item-left {
            display: flex;
            align-items: center;
          }
        }
      }
      .paybutton {
        width: 100%;
        height: 109rpx;
        margin-top: 32rpx;
        background: url('https://ojqn.wm2177.com/wechat_imgs/txzr/paybutton.png')
          no-repeat;
        background-size: contain;
        font-weight: 800;
        font-size: 38rpx;
        color: #9146a0;
        line-height: 96rpx;
        text-align: center;
        // text-stroke: 1rpx #FFFFFF;
        // -webkit-text-stroke: 1rpx #FFFFFF;
      }
      .pays-agree {
        width: 100%;
        margin-top: 29rpx;
        font-size: 20rpx;
        color: #e1e1e1;
        text-align: center;
      }
    }
  }
</style>
